<!-- 登录页面 -->
<template>
<v-app>
  <v-container fill-height style="background-image: url('https://picsum.photos/1920/1080?grayscale')" fluid>
  <v-row
      align="center"
      justify="center">
      <v-col cols="12" sm="6" md="4" lg="3" xl="2">
        <v-form ref="loginForm">
          <v-card  class=" white--text" :elevation="24">
            <v-card-title class="primary pa-4">
              <v-row>
                <v-col>
                  <span class="title">重置密码</span>
                </v-col>
              </v-row>
            </v-card-title>
            <v-card-text class="pt-4">
              <v-text-field label="输入密码"
              required
              autocomplete
              prepend-icon="vpn_key"
              v-model="formData.new_password"
              :append-icon="showPassword1 ? 'visibility_off' : 'visibility'"
              :type="showPassword1 ? 'text' : 'password'"
              @click:append="showPassword1 = !showPassword1"
              name="password"
              v-validate="'required|min:6'"
              :error-messages="errors.collect('password')"
              data-vv-as="输入密码"></v-text-field>
              <v-text-field label="再次确认密码"
              required
              autocomplete
              prepend-icon="vpn_key"
              v-model="formData.repassword"
              :append-icon="showPassword2 ? 'visibility_off' : 'visibility'"
              :type="showPassword2 ? 'text' : 'password'"
              @click:append="showPassword2 = !showPassword2"
              name="repassword"
              v-validate="'required|min:6'"
              :error-messages="errors.collect('repassword')"
              data-vv-as="再次确认密码"></v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-row>
                <v-col cols="12">
                  <v-btn block @click="loginHandle" color="primary"><v-icon left>autorenew</v-icon><span>重置</span></v-btn>
                </v-col>
                <v-col cols="6">
                  <v-btn text block color="primary" class="caption" :to="{ name: 'Register' }"><span>注册</span></v-btn>
                </v-col>
                <v-col cols="6">
                  <v-btn text block color="primary" class="caption" :to="{ name: 'Login' }"><span>登录</span></v-btn>
                </v-col>
              </v-row>
            </v-card-actions>
          </v-card>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
  </v-app>
</template>
<script>
import { adminChangePwd } from '@/api/admin/auth.js'
export default {
  name: 'ForgetPwd',
  components: {},
  data: function () {
    return {
      formData: {
        new_password: '',
        repassword: ''
      },
      showPassword1: false,
      showPassword2: false
    }
  },
  methods: {
    loginHandle: function() {
      this.$validator.validate().then(result => {
        if (result) {
          this.formData.email = this.$route.query.email
          this.formData.username = this.$route.query.username
          this.formData.sercet = this.$route.query.sercet
          adminChangePwd(this.formData).then(res => {
            this.$toasted.success(res.data)
          })
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
